<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02 - 加载百度离线地图 - ol4</title>
    <script src="../lib/gcoord.js"></script>
    <script src="../lib/ol6.4.3/ol.js"></script>
    <script src="../lib/gcoord.js"></script>
    <script src="../lib/bd09.js"></script>
    <!--    <script src="../lib/ol4/ol4.js"></script>-->
    <link rel="stylesheet" href="../css/ol6.4.3/ol.css">
    <link rel='stylesheet' href='../css/main.css'>

</head>
<body>
<div id="map"></div>
</body>
<script>
    const projectionBD09 = new ol.proj.Projection({
        code: 'BD:09',
        extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
        units: 'm',
        axisOrientation: 'neu',
        global: false
    });
    ol.proj.addProjection(projectionBD09);
    const projectionExtentInBD09 = projectionBD09.getExtent();
    const resolutions = [];
    const maxZoom = 18;
    // 计算百度使用的分辨率
    for (let i = 0; i <= maxZoom; i++) {
        resolutions[i] = Math.pow(2, maxZoom - i);
    }
    const tileGrid = new ol.tilegrid.TileGrid({
        origin: [0, 0],
        resolutions: resolutions,
        extent: projectionExtentInBD09
    });

    const baiduSource = new ol.source.TileImage({
        projection: 'BD:09',
        tileGrid: tileGrid,
        tileUrlFunction: (tileCoord, pixelRatio, proj) => {
            let [z, x, y] = tileCoord;
            console.log(tileCoord);
            y = -y - 1;
            return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20210407`;
            // 百度瓦片服务url将负数使用M前缀来标识
            // return `http://192.168.130.167:8080/baidumaps/roadmap/${z}/${x}/${-y}.png`;
            // return `http://192.168.107.154:10001/scgis/roadmap?level=${z}&col=${x}&row=${y}`;
            // return `http://192.168.130.167:8080/baidumaps/roadmap?level=${z}&col=${x}&row=${y}`;
            // return `http://192.168.106.246:10001/scgis/pic?level=${z}&col=${x}&row=${y}`;
        }
    });
    // 百度地图层
    const baiduMapLayer = new ol.layer.Tile({
        source: baiduSource
    });
    // 120.151966, 30.244797
    // const centerPoint = [120.151966, 30.244797];
    // const centerPoint = [120.17284,30.269524];
    // const centerPoint = [120.282759, 30.35098];
    const centerPoint = [120.02343971512973, 30.28593971177774];
    let circlePoint = gcoord.transform(centerPoint, gcoord.WGS84, gcoord.BD09MC);
    // circlePoint = [13361050.44, 3518591.74];
    // circlePoint = [13360959.02, 3518637.38];
    circlePoint = [13360980.45511001, 3518634.6188182305];
    // console.log(circlePoint);

    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(circlePoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon(
            /** @type {olx.style.IconOptions} */ ({
                anchor: [10, 26],
                anchorXUnits: 'pixels',
                anchorYUnits: 'pixels',
                src: '../image/position_orange.png'
            })
        )
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });

    const map = new ol.Map({
        layers: [
            baiduMapLayer
            // iconLayer
        ],
        target: 'map',
        view: new ol.View({
            center: circlePoint,
            projection: 'BD:09',
            zoom: 11,
            maxZoom: 19,
            minZoom: 0
        })
    });
    const img = document.createElement('img');
    img.src = '../image/jqyb_o.gif';
    const overlay = new ol.Overlay({
        element: img,
        autoPan: false,
        positioning: 'center-center',
        position: circlePoint,
        // offset: [22, 22],
    });
    map.addOverlay(overlay);
</script>
</html>